{% block sw_order_new_customer_modal %}
<sw-modal
    :title="$tc('sw-order.createBase.detailsHeader.buttonAddNewCustomer')"
    @modal-close="onClose"
>
    {% block sw_order_new_customer_modal_tabs %}
    <sw-tabs
        class="sw-order-new-customer-modal"
        position-identifier="sw-order-new-customer-modal"
        default-item="details"
    >
        <template #default="{ active }">
            {% block sw_order_new_customer_modal_tabs_details %}
            <sw-tabs-item
                name="details"
                :active-tab="active"
                :has-error="swOrderNewCustomerDetailError"
            >
                {{ $tc('sw-order.newCustomerModal.labelDetails') }}
            </sw-tabs-item>
            {% endblock %}

            {% block sw_order_new_customer_modal_tabs_billing %}
            <sw-tabs-item
                name="billingAddress"
                :active-tab="active"
                :has-error="swOrderNewCustomerAddressError"
            >
                {{ $tc('sw-order.createBase.detailsBody.labelBillingAddress') }}
            </sw-tabs-item>
            {% endblock %}

            {% block sw_order_new_customer_modal_tabs_shipping %}
            <sw-tabs-item
                name="shippingAddress"
                :active-tab="active"
                :has-error="!isSameBilling && swOrderNewCustomerAddressError"
            >
                {{ $tc('sw-order.createBase.detailsBody.labelShippingAddress') }}
            </sw-tabs-item>
            {% endblock %}
        </template>

        <template #content="{ active }">
            {% block sw_order_new_customer_modal_content_details %}
            <div v-if="active ==='details'">
                {% block sw_order_new_customer_modal_content_details_guest %}

                <mt-switch
                    v-model="customer.guest"
                    remove-top-margin
                    :label="$tc('sw-order.newCustomerModal.labelGuest')"
                />
                {% endblock %}
                {% block sw_order_new_customer_modal_content_details_form %}
                <sw-customer-base-form
                    :is-loading="isLoading"
                    :customer="customer"
                    @sales-channel-change="onChangeSalesChannel"
                />
                {% endblock %}
            </div>
            {% endblock %}

            {% block sw_order_new_customer_modal_content_shipping %}
            <div v-if="active === 'shippingAddress'">
                {% block sw_order_new_customer_modal_content_shipping_same_billing %}

                <mt-switch
                    v-model="isSameBilling"
                    remove-top-margin
                    :label="$tc('sw-customer.addressForm.labelSameBillingAddress')"
                />
                {% endblock %}

                {% block sw_order_new_customer_modal_content_shipping_form %}
                <sw-customer-address-form
                    :customer="customer"
                    :disabled="isSameBilling"
                    :address="shippingAddress"
                />
                {% endblock %}
            </div>
            {% endblock %}

            {% block sw_order_new_customer_modal_content_billing %}
            <div v-if="active ==='billingAddress'">
                {% block sw_order_new_customer_modal_content_billing_form %}
                <sw-customer-address-form
                    :customer="customer"
                    :address="billingAddress"
                />
                {% endblock %}
            </div>
            {% endblock %}
        </template>
    </sw-tabs>
    {% endblock %}

    {% block sw_order_new_customer_modal_actions %}
    <template #modal-footer>
        {% block sw_order_new_customer_modal_action_close %}
        <mt-button
            size="small"
            variant="secondary"
            @click="onClose"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_order_new_customer_modal_actions_apply %}
        <mt-button
            size="small"
            variant="primary"
            :is-loading="isLoading"
            @click="onSave"
        >
            {{ $tc('global.default.save') }}
        </mt-button>
        {% endblock %}
    </template>
    {% endblock %}
</sw-modal>
{% endblock %}
